<template>
  <div class="main">
    <div class="login-icon">
      <img :src="require('@/assets/Image/login-icon.png')" width="100%" alt="">
    </div>
    <div class="login-code">
      <h1>扫码登录</h1>
      <div class="iframe-bg">
        <iframe class="login-code--img" :src="url" frameborder="0" width="360px" height="360px"></iframe>
      </div>
      <p>使用<strong>浙政钉</strong>扫码登录 </p>
    </div>

    <div class="login--form">
      <h1>账号登录</h1>
      <a-form-model ref="form" class="user-layout-login" :model="model" :rules="validatorRules" @keyup.enter.native="handleSubmit">

        <a-form-model-item prop="username">
          <a-input v-model="model.username" size="large" placeholder="请输入您的账号">
            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="password">
          <a-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入您的密码">
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input>
        </a-form-model-item>
        <a-form-item style="margin-top: 48px">
          <a-button
            size="large"
            type="primary"
            class="login-button"
            shape="round"
            block
            :loading="loginBtn"
            @click.stop.prevent="handleSubmit">确定
          </a-button>
        </a-form-item>
      </a-form-model>
    </div>
    <a-modal v-model="show" title="绑定账号" @ok="search" onText="查询">
      <a-form-model ref="ruleform" class="user-layout-login" :model="form" :rules="rules">
        <a-form-model-item prop="mobile" label="手机号">
          <a-input v-model="form.mobile" size="large" placeholder="请输入您的手机号">

          </a-input>
          <div class="red" v-if="showerror">您的手机号没查到可绑定的账号,请联系相关人员下发账号!</div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { login, ddLogin, loginMobile, getUidByMobile } from '@/api/user';
import { ACCESS_TOKEN, USERINFO } from '@/store/mutation-types';

// import { AESEncrypt } from '@/utils/utils';

export default {
    components: {
    },
    data() {
      return {
        show: false,
        showerror: false,
        form: {},
        // https://login.dg-work.cn/oauth2/auth.htm?response_type=code&client_id=应用标识&redirect_uri=回调地址&scope=get_user_info&authType=QRCODE&embedMode=true
        url: `https://login.dg-work.cn/oauth2/auth.htm?response_type=code&client_id=wxb_login_dingoa&redirect_uri=${encodeURIComponent(window.location.protocol + '//' + window.location.host)}&scope=get_user_info&authType=QRCODE&embedMode=true`,
        customActiveKey: 'tab1',
        rememberMe: true,
        loginBtn: false,
        requiredTwoStepCaptcha: false,
        stepCaptchaVisible: false,
        encryptedString: {
          key: '',
          iv: ''
        },
        model: {},
        validatorRules: {
          username: [
            { required: true, message: '请输入用户名!' }
          ],
          password: [{
            required: true, message: '请输入密码!'
          }]
        },
        rules: {
          mobile: [
            { required: true, message: '请输入手机号!' }
          ]
        },
        requestCodeSuccess: false,
        accountId: ''
      };
    },
    created() {
      const that = this;
      window.onmessage = function(event) {
        console.log(event.data, 'event data');
        if (event.data && event.data.code) {
          if (process.env.VUE_APP_TITLE == 'test') {
            that.$info({
              content: `code: ${event.data.code}`
            });
            return;
          }
          // eslint-disable-next-line no-unreachable
          ddLogin({ code: event.data.code }).then(res => {
            if (!res.data.token) {
              that.show = true;
              that.accountId = res.data.accountId;
              that.$message.error(res.data.title);
            } else {
              that.$notification.success({
                message: '登录成功',
                description: res.msg
              });
              that.$ls.set(ACCESS_TOKEN, res.data.token);

              that.$store.dispatch('UserInfo', res.data).then(() => {
                that.$router.push('/');
              });
            }
          });
        }
        // alert(JSON.stringify(event.data));
      };
    },
    methods: {

      // 登录
      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // this.loginBtn = true;
            login({
              ...this.model
            }).then(res => {
              this.show = false;
              this.$notification.success({
                message: '登录成功',
                description: res.msg
              });
              this.$ls.set(ACCESS_TOKEN, res.data.token);

              this.$store.dispatch('UserInfo', res.data).then(() => {
                this.$router.push('/');
              });
            }).catch(() => {
              // this.loginBtn = false;
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      search() {
        const that = this;
        this.$refs.ruleform.validate(valid => {
          if (valid) {
            // this.loginBtn = true;
            getUidByMobile({
              ...this.form
            }).then(res => {
              if (res.data.uid) {
                this.showerror = false;
                this.$ls.set(USERINFO, res.data);
                this.$confirm({
                  content: '是否绑定手机号？',
                  onOk() {
                    that.submit();
                  }
                });
              } else {
                this.showerror = true;
              }
            }).catch(() => {
              // this.loginBtn = false;
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      submit() {
        this.$refs.ruleform.validate(valid => {
          if (valid) {
            this.loginBtn = true;
            loginMobile({
              ...this.form,
              accountId: this.accountId
            }).then(res => {
              this.$notification.success({
                message: '登录成功',
                description: res.msg
              });
              this.$ls.set(ACCESS_TOKEN, res.data.token);

              this.$store.dispatch('UserInfo', res.data).then(() => {
                this.$router.push('/');
              });
            }).catch(() => {
              this.loginBtn = false;
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

    }

  };
</script>
<style lang="less">

  .main {

    display: flex;
    align-items: center;
    height: inherit;
    color: #333;
    p,h1 {
      margin: 0;
    }
    .ant-input {
      border: none;
      border-bottom: 1px solid #d9d9d9;
      border-radius: 0;
      &:focus,&:hover {
        border: none !important;
        border-bottom: 1px solid #395596 !important;
        box-shadow: none !important;
      }
    }
    .login-icon {
      width: 370px;
      margin-left: 16px;
    }
    .login-code {
      margin-left: 65px;
      text-align: center;
      margin-right: 78px;
      height: 400px;
      border-right: 1px solid #f1f1f1;
      padding-right: 60px;
      h1 {
        font-size: 20px;
        font-weight: 400;
        color: #333333;
        margin-bottom: 24px;
        font-weight: 500;
        letter-spacing: 0.05em;
      }
      .login-code--img {
        width: 300px;
        height: 300px;
        // border: 1px solid #ddd;
        margin: 0 auto;
        transform: translate(-45px, -85px);
      }
      .iframe-bg {
        width: 200px;
        height: 200px;
        overflow: hidden;
      }
      p {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 35px;
        margin-top: 8px;
      }
    }
    .login--form {
      height: 400px;
      >h1 {
        font-size: 20px;
        font-size: 500;
        text-align: center;
        margin-bottom: 100px;
      }
      .ant-form-item {
        margin-bottom: 24px !important;
      }
      .ant-input-affix-wrapper .ant-input:not(:first-child) {
        padding-left: 40px;
      }
    }
    .user-layout-login {
      margin: 0 auto;
      width: 280px;
    }
  }
</style>
<style>
  .valid-error .ant-select-selection__placeholder{
    color: #f5222d;
  }
</style>
